<template>
  <div class="app-container">
    <el-form :inline="true" :model="filters" class="demo-form-inline filter-container">
      <el-form-item label="消息状态：">
        <el-select v-model="filters.status">
          <el-option v-for="item in consts.NOTICE_DIALOG_STATUS"
                     :key="item.value"
                     :label="item.title"
                     :value="item.value">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="操作人">
        <el-select v-model="filters.operator">
          <el-option v-for="item in operatorList"
                     :key="item"
                     :label="item"
                     :value="item">
          </el-option>
        </el-select>
      </el-form-item>
      <!-- <el-form-item label="主题" prop="summary">
        <el-input placeholder="请输入主题" v-model="filters.summary"></el-input>
      </el-form-item> -->
      <el-form-item label="显示端">
        <el-select v-model="filters.showClient">
          <el-option v-for="item in consts.ADVER_DEVICE_TYPE_ACTIVE"
                     :key="item.value"
                     :label="item.title"
                     :value="item.value">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="消息类别">
        <el-select v-model="filters.dialogType">
          <el-option v-for="item in consts.NOTICE_TYPE"
                     :key="item.value"
                     :label="item.title"
                     :value="item.value">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="账户类型">
        <el-select v-model="filters.userType">
          <el-option v-for="item in consts.ACCOUNT_TYPE"
                     :key="item.value"
                     :label="item.title"
                     :value="item.value">
          </el-option>
        </el-select>
      </el-form-item>
      <el-button type="primary" v-waves icon="el-icon-search" @click="gridSearch">搜索</el-button>
    </el-form>

    <el-table :data="tableData.list" v-loading="loading" element-loading-text="给我一点时间" border fit
              highlight-current-row
              style="width: 100%">
      <el-table-column label="开启时间" align="center">
        <template slot-scope="{row}">
          {{row.startTime | toTime}}
        </template>
      </el-table-column>
      <el-table-column label="结束时间" align="center">
        <template slot-scope="{row}">
          {{row.endTime | toTime}}
        </template>
      </el-table-column>
      <el-table-column label="主题" align="center">
        <template slot-scope="{row}">
          {{row.name}}
        </template>
      </el-table-column>
      <el-table-column label="简介" align="center">
        <template slot-scope="{row}">
          {{row.summary}}
        </template>
      </el-table-column>
      <el-table-column label="账户类型" align="center">
        <template slot-scope="{row}">
          {{row.userType | toConverter('ACCOUNT_TYPE')}}
        </template>
      </el-table-column>
      <el-table-column label="用户层级" align="center">
        <template slot-scope="{row}">
          {{getUserLevel(row.userLevelArray)}}
        </template>
      </el-table-column>
      <!--<el-table-column label="消息类型" align="center">-->
        <!--<template slot-scope="{row}">-->
          <!--{{row.dialogType | toConverter('NOTICE_TYPE')}}-->
        <!--</template>-->
      <!--</el-table-column>-->
      <el-table-column label="显示端" align="center">
        <template slot-scope="{row}">
          {{row.showClientArray | toConverter('ADVER_DEVICE_TYPE_ACTIVE') | join}}
        </template>
      </el-table-column>
      <el-table-column label="消息状态" align="center">
        <template slot-scope="{row}">
          {{row.status | toConverter('NOTICE_DIALOG_STATUS')}}
        </template>
      </el-table-column>
      <el-table-column label="操作人" align="center">
        <template slot-scope="{row}">
          {{row.lastOperator}}
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" width="300px">
        <template slot-scope="{row}">
          <el-button v-if="roleCheck('edit')" type="text"
                     @click="openDialog({dialogName: 'notice-edit',
                     props: row
                     })">
            编辑
          </el-button>
          <el-button v-if="roleCheck('del')" type="text" @click="handleDelete(row)">删除</el-button>
          <el-button type="text" @click="toggleStatus(row)" v-if="row.status === 3 && roleCheck('switch')">恢复</el-button>
          <el-button type="text" @click="toggleStatus(row)" v-else-if="roleCheck('switch')">收回</el-button>
        </template>
      </el-table-column>
    </el-table>

    <div class="pagination-container">
      <el-pagination background @size-change="gridSizeChange" @current-change="gridCurrentChange"
                     :current-page="filters.page" :page-sizes="gridPageSize" :page-size="filters.size"
                     :layout="gridLayout" :total="tableData.total">
      </el-pagination>
    </div>

    <el-dialog :visible.sync="dialogVisible" :before-close="() => {dialogVisible = false}">
      <dashboard-normal-notice
        style="max-height:60vh; overflow: auto"
        :id="dialogProps.id"
        :row-data="dialogProps"
        @on-success="dialogVisible = false;doGet({action: 'getGrid'})"
        v-if="dialogName === 'notice-edit' && dialogProps.dialogType === 0"></dashboard-normal-notice>
      <dashboard-bank-notice
        style="max-height:60vh; overflow: auto"
        :id="dialogProps.id"
        :row-data="dialogProps"
        @on-success="dialogVisible = false;doGet({action: 'getGrid'})"
        v-if="dialogName === 'notice-edit' && dialogProps.dialogType === 1"></dashboard-bank-notice>
    </el-dialog>
  </div>
</template>

<script>
  import {form, grid, dialog} from '@/build';
  import getCommand from '@/mixins/getCommand';

  import {
    dialogOperatorApi,
    noticeDashboardDialogListApi as listApi,
    noticeDashboardDialogDeleteApi as deleteApi,
    noticeDashboardDialogUpdateStatus as statusApi,
  } from '@/services/api/notice';
  import {
    getUserLevelList,
  } from '@/services/api/userLevel';

  import DashboardNormalNotice from './dashboardNormalNotice';
  import DashboardBankNotice from './dashboardBankNotice';

  export default {
    name: 'account-setting',

    mixins: [form, grid, dialog, getCommand],

    components: {
      DashboardNormalNotice,
      DashboardBankNotice
    },

    props: {
      departmentId: Number,
      workId: Number,
    },

    data() {
      return {
        userLevelList: [],
        operatorList: [],
        tableData: {
          items: [],
          total: 0
        },
        filters: {
          status: -1,
          page: 1,
          size: 20,
        },
        filterDateType: false,
      }
    },

    methods: {
      handleDelete({id}) {

        this.$confirm(`确定要删除此弹窗吗？`, '删除弹窗', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          deleteApi({
            id,
          }).then(([result, data]) => {
            if (result) {
              this.doGet({action: 'getGrid'});
              this.$message({
                type: 'success',
                message: `删除成功!`
              });
            } else {
              this.$message({
                type: 'error',
                message: `删除失败!${data.message}`
              });
            }
          });
        })
          .catch(() => {
          })
      },


      toggleStatus({id, status}) {
        const action = status !== 3 ? '收回' : '恢复'
        this.$confirm(`确定要${action}此弹窗吗？`, `${action}弹窗`, {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          statusApi({
            id,
            status: status !== 3 ? 1 : 0
          }).then(([result, data]) => {
            if (result) {
              this.doGet({action: 'getGrid'});
              this.$message({
                type: 'success',
                message: `${action}成功!`
              });
            } else {
              this.$message({
                type: 'error',
                message: `${action}失败!${data.message}`
              });
            }
          });
        })
          .catch(() => {
          })
      },

      getUserLevel(userLevel) {
        if (_.isArray(userLevel)) {
          return _.map(userLevel, _.partial(this._toConverter)).join(',');
        } else {
          return this._toConverter(parseInt(userLevel))
        }
      },
      _toConverter(value) {
        try {
          return _.find(this.userLevelList, {levelId:value}).name;
        } catch (e) {
          // throw new Error(`${constName}没有找到对应的值${value}`);
          return '--'
        }
      },
    },
    mounted() {
      this.bindGet(dialogOperatorApi, 'operatorList', {});

      this.bindGet(getUserLevelList, 'userLevelList', {});

      this.bindGet(listApi, 'tableData', {
        action: 'getGrid',
        sendingData: 'filters'
      });

      this.getAll();
    },

    watch: {
      '$route':{
        handler(newVal) {
          this.$nextTick(() => {
            if(!newVal.query.add) {
              this.doGet({action: 'getGrid'})
            }
          });
        },
        immediate: true
      }
    }
  }
</script>
